<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage,ElLoading, ElMessageBox, type FormInstance } from 'element-plus'


//table-list
const tableHeight = ref(0)
// 定义表格数据的类型
interface TableRow {
    id: number;
    time: string;
    name: string;
    name1: string;
}
const listTableData = ref([])

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};
const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}

// 新增
const addDialogVisible = ref(false)
const addForm = ref({
    supplierName: '',
    contacter: '',
    contactPhone: '',
    contactAddress: '',
    remark: ''
})

const rules = ref({
    supplierName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    remark: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})

// 修改
const editDialogVisible = ref(false)
let editForm = ref<any>({
    supplierName: '',
    contacter: '',
    contactPhone: '',
    contactAddress: '',
    remark: ''
})


import { SupplierMsgList, addSupplierMsg, editSupplierMsg, delSupplierMsg, SupplierMsgInfo } from "@/api";

// 搜索
const searchForm = ref({
    supplierName: '',
    PageNum: 1, //当前页码
    PageSize: 10 //PageSize
})

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    searchForm.value.PageNum = 1
    getSupplierMsgList()
}

const totalPage = ref(0)

//list
function getSupplierMsgList(){
    console.log(searchForm.value)
    SupplierMsgList(searchForm.value).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

const ruleFormRef = ref<FormInstance>()

//新增
const postAddSupplierMsg = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            addSupplierMsg(addForm.value).then(res=>{
                console.log('新增----',res)
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '添加成功',
                    })
                    addDialogVisible.value = false
                    addForm.value = {
                        supplierName: '',
                        contacter: '',
                        contactPhone: '',
                        contactAddress: '',
                        remark: ''
                    }
                    getSupplierMsgList()
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
    
}


//修改
const postEditSupplierMsg = () => {
    editSupplierMsg(editForm.value).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            editDialogVisible.value = false
            getSupplierMsgList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 详情 
function getSupplierMsgInfo(id:number){
    SupplierMsgInfo(id).then(res=>{
        console.log('详情----',res.data)
        editForm.value = res.data
        editDialogVisible.value = true
    })
}


// 删除
const clickDelSupplierMsg = (id:number) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delSupplierMsg(id).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getSupplierMsgList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}

// 批量删除
const batchDel = () => {
    if(selectedRowIds.value.size == 0){
        ElMessage.error('请先选择要批量删除的数据')
    }
    else{
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let ids: string = Array.from(selectedRowIds.value).join(', ');
        delSupplierMsg(ids).then(res=>{
            console.log('删除----',res)
            loading.close()
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getSupplierMsgList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    }
}

const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;

    getSupplierMsgList()

});

</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增供应商" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rules" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="105" >
                <el-form-item label="供应商名称:" prop="supplierName">
                    <el-input v-model="addForm.supplierName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="供应商编号:" prop="remark">
                    <el-input v-model="addForm.remark" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系人:" prop="contacter">
                    <el-input v-model="addForm.contacter" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系电话:" prop="contactPhone">
                    <el-input v-model="addForm.contactPhone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系地址:" prop="contactAddress" style="width: 92%;">
                    <el-input v-model="addForm.contactAddress" type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postAddSupplierMsg(ruleFormRef)">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 -->
    <el-dialog v-model="editDialogVisible" title="修改供应商" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form  :inline="true" :model="editForm" class="mt15 form-inline-row-two" label-width="105" >
                <el-form-item label="供应商名称:">
                    <el-input v-model="editForm.supplierName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="供应商编号:">
                    <el-input v-model="editForm.remark" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系人:">
                    <el-input v-model="editForm.contacter" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input v-model="editForm.contactPhone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系地址:" style="width: 92%;">
                    <el-input v-model="editForm.contactAddress" type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postEditSupplierMsg()">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="90">
            <el-form-item label="供应商名称:" prop="supplierName">
                <el-input v-model="searchForm.supplierName" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="getSupplierMsgList()">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true">新增</el-button>
            <el-button type="primary" color="#2565C8" @click="batchDel">批量删除</el-button>
        </div>
        <div class="table_list mt15">
            <el-table class="custom-table" 
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false"
                :highlight-current-row="false" 
                :height="tableHeight" 
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef" 
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column label="供应商编号" prop="remark" />
                <el-table-column label="供应商名称" prop="supplierName" />
                <el-table-column label="联系人" prop="contacter" />
                <el-table-column label="联系电话" prop="contactPhone" />
                <el-table-column label="联系地址" prop="contactAddress" />
                <el-table-column align="center" label="操作" min-width="120">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelSupplierMsg(scope.row.id)">删除</a>|
                            <a href="javascript:;" @click="getSupplierMsgInfo(scope.row.id)">修改</a>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="getSupplierMsgList" :total="totalPage"  background layout="prev, pager, next" />
        </div>

    </div>

</template>
<style scoped lang="scss">
.show_color{
    width: 50px;
    height: 24px;
    border-radius: 2px;
}
::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>
